<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动体验 - 古韵新境</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .interactive-card {
                transition: all 0.4s ease;
            }
            .interactive-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
        
        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 导航栏滚动效果 */
        .nav-scrolled {
            background-color: rgba(245, 242, 234, 0.95);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body class="bg-rice text-ink font-sans">
    <!-- 导航栏 -->
    <header id="main-nav" class="fixed top-0 left-0 w-full z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 md:px-8 flex justify-between items-center">
            <!-- Logo -->
            <a href="index.html" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                    <span class="text-rice font-kai text-xl">古</span>
                </div>
                <span class="text-xl md:text-2xl font-song font-bold">古韵新境</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="font-song hover:text-cinnabar transition-colors duration-300">首页</a>
                <a href="poems.html" class="font-song hover:text-cinnabar transition-colors duration-300">诗境</a>
                <a href="classics.html" class="font-song hover:text-cinnabar transition-colors duration-300">典籍</a>
                <a href="interactive.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">互动</a>
                <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                    登录 / 注册
                </button>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-ink text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-paper absolute top-full left-0 w-full shadow-lg">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="index.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">首页</a>
                <a href="poems.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">诗境</a>
                <a href="classics.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">典籍</a>
                <a href="interactive.html" class="font-song py-2 border-b border-gray-200 text-cinnabar">互动</a>
                <a href="about.html" class="font-song py-2 hover:text-cinnabar">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                    登录 / 注册
                </button>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="scroll-reveal">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">互动体验</h1>
                <p class="text-lightink max-w-2xl">不止于阅读，更能参与创作，让古典诗词焕发新的生命力</p>
            </div>
        </section>
        
        <!-- 互动功能列表 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能1：声景体验 -->
                <a href="soundscape.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/1062/600/400" alt="声景体验" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">声景体验</h3>
                                <p class="text-rice/90 text-sm">聆听诗词中的意境之声</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">结合诗词意境，生成沉浸式音频体验，感受"诗中有画，画中有声"的境界。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>开始体验</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 功能2：诗画创作 -->
                <a href="painting.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/96/600/400" alt="诗画创作" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">诗画创作</h3>
                                <p class="text-rice/90 text-sm">为诗词绘制心中的意境</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">使用简易绘画工具，为喜爱的诗词创作插画，用视觉艺术诠释文字之美。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>开始创作</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 功能3：古今对话 -->
                <a href="dialogue.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/177/600/400" alt="古今对话" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">古今对话</h3>
                                <p class="text-rice/90 text-sm">与古代诗人"面对面"交流</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">模拟与李白、杜甫等诗人对话，探寻他们创作背后的故事与心境。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>开始对话</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 功能4：续写诗句 -->
                <a href="continue-poem.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/1074/600/400" alt="续写诗句" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">续写诗句</h3>
                                <p class="text-rice/90 text-sm">为经典诗词创作新篇章</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">延续经典诗词的意境与风格，创作属于你的新诗句，与古人隔空唱和。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>开始续写</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 功能5：诗词接龙 -->
                <a href="poem-chain.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/180/600/400" alt="诗词接龙" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">诗词接龙</h3>
                                <p class="text-rice/90 text-sm">与其他用户共续诗意</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">参与多人诗词接龙游戏，根据上一句的最后一字，接出下一句诗词。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>开始接龙</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 功能6：用户作品展示 -->
                <a href="user-works.html" class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/42/600/400" alt="用户作品展示" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/70 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-xl font-song font-bold text-rice">用户作品</h3>
                                <p class="text-rice/90 text-sm">欣赏他人的创意之作</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">浏览其他用户创作的诗词、插画和续写作品，发现古典文学的现代诠释。</p>
                        <div class="flex items-center text-cinnabar">
                            <span>查看作品</span>
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </div>
                    </div>
                </a>
            </div>
        </section>
        
        <!-- 热门活动 -->
        <section class="bg-ink text-rice py-16 mb-16">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 text-center scroll-reveal">热门活动</h2>
                <p class="text-rice/70 text-center max-w-2xl mx-auto mb-12 scroll-reveal">参与主题活动，赢取精美奖品</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- 活动1 -->
                    <div class="bg-paper/10 backdrop-blur-sm rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                        <div class="relative h-56 overflow-hidden">
                            <img src="https://picsum.photos/id/133/800/500" alt="中秋诗会" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            <div class="absolute top-4 left-4 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">进行中</div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-song font-bold mb-2">中秋诗会：月满人间</h3>
                            <p class="text-rice/80 mb-4">围绕中秋主题创作诗词，或为经典中秋诗作绘制插画，赢取限量版古典文学典籍。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-rice/60"><i class="fa fa-calendar-o mr-1"></i> 截止日期：9月30日</span>
                                <button class="bg-cinnabar text-rice px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors text-sm">
                                    立即参与
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 活动2 -->
                    <div class="bg-paper/10 backdrop-blur-sm rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                        <div class="relative h-56 overflow-hidden">
                            <img src="https://picsum.photos/id/164/800/500" alt="李白诗歌创作大赛" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            <div class="absolute top-4 left-4 bg-gray-600 text-rice text-sm px-3 py-1 rounded-full">即将开始</div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-song font-bold mb-2">李白诗歌创作大赛</h3>
                            <p class="text-rice/80 mb-4">模仿李白豪放风格创作诗歌，优秀作品将有机会收录入平台年度精选集。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-rice/60"><i class="fa fa-calendar-o mr-1"></i> 开始日期：10月15日</span>
                                <button class="border border-rice text-rice px-4 py-2 rounded-lg hover:bg-rice/10 transition-colors text-sm">
                                    预约提醒
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 用户作品精选 -->
        <section class="container mx-auto px-4">
            <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 text-center scroll-reveal">用户作品精选</h2>
            <p class="text-lightink text-center max-w-2xl mx-auto mb-12 scroll-reveal">欣赏社区用户的创意之作</p>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 作品1 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <img src="https://picsum.photos/id/91/400/300" alt="用户画作" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-song font-medium mb-1">《静夜思》插画</h3>
                        <p class="text-sm text-lightink mb-2">用户：月下独酌</p>
                        <div class="flex items-center text-sm">
                            <span class="flex items-center text-lightink mr-4"><i class="fa fa-heart-o mr-1"></i> 128</span>
                            <span class="flex items-center text-lightink"><i class="fa fa-comment-o mr-1"></i> 24</span>
                        </div>
                    </div>
                </div>
                
                <!-- 作品2 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="p-6 h-48 flex flex-col justify-center">
                        <p class="font-kai text-center text-lg mb-3">"窗前明月照九州，天涯游子共此时"</p>
                        <p class="text-sm text-lightink text-center">《续静夜思》- 用户：天涯客</p>
                    </div>
                    <div class="p-4 border-t border-gray-200">
                        <h3 class="font-song font-medium mb-1">《静夜思》续写</h3>
                        <div class="flex items-center text-sm">
                            <span class="flex items-center text-lightink mr-4"><i class="fa fa-heart-o mr-1"></i> 96</span>
                            <span class="flex items-center text-lightink"><i class="fa fa-comment-o mr-1"></i> 18</span>
                        </div>
                    </div>
                </div>
                
                <!-- 作品3 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <img src="https://picsum.photos/id/131/400/300" alt="用户画作" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-song font-medium mb-1">《望庐山瀑布》意境图</h3>
                        <p class="text-sm text-lightink mb-2">用户：飞流直下</p>
                        <div class="flex items-center text-sm">
                            <span class="flex items-center text-lightink mr-4"><i class="fa fa-heart-o mr-1"></i> 156</span>
                            <span class="flex items-center text-lightink"><i class="fa fa-comment-o mr-1"></i> 32</span>
                        </div>
                    </div>
                </div>
                
                <!-- 作品4 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm interactive-card scroll-reveal">
                    <div class="p-6 h-48 flex flex-col justify-center">
                        <p class="font-kai text-center text-lg mb-3">"银河落九天，奔流入东海。豪情存万古，诗情传千载"</p>
                        <p class="text-sm text-lightink text-center">《和望庐山瀑布》- 用户：诗仙门下</p>
                    </div>
                    <div class="p-4 border-t border-gray-200">
                        <h3 class="font-song font-medium mb-1">唱和之作</h3>
                        <div class="flex items-center text-sm">
                            <span class="flex items-center text-lightink mr-4"><i class="fa fa-heart-o mr-1"></i> 87</span>
                            <span class="flex items-center text-lightink"><i class="fa fa-comment-o mr-1"></i> 15</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-10">
                <a href="user-works.html" class="inline-block border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                    查看更多作品
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">创作活动</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">contact@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区中关村南大街5号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 - 古典文学革新平台 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-cinnabar text-rice w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        $(window).scroll(function() {
            const nav = $('#main-nav');
            if ($(window).scrollTop() > 50) {
                nav.addClass('nav-scrolled');
            } else {
                nav.removeClass('nav-scrolled');
            }
            
            // 回到顶部按钮显示/隐藏
            const backToTop = $('#back-to-top');
            if ($(window).scrollTop() > 300) {
                backToTop.removeClass('opacity-0 invisible').addClass('opacity-100 visible');
            } else {
                backToTop.removeClass('opacity-100 visible').addClass('opacity-0 invisible');
            }
            
            // 滚动显示动画
            $('.scroll-reveal').each(function() {
                const revealTop = $(this).offset().top;
                const windowHeight = $(window).height();
                const scrollTop = $(window).scrollTop();
                
                if (revealTop < scrollTop + windowHeight - 100) {
                    $(this).addClass('active');
                }
            });
        });
        
        // 移动端菜单切换
        $('#menu-toggle').click(function() {
            $('#mobile-menu').toggleClass('hidden');
            $(this).find('i').toggleClass('fa-bars fa-times');
        });
        
        // 回到顶部功能
        $('#back-to-top').click(function() {
            $('html, body').animate({ scrollTop: 0 }, 600);
        });
        
        // 页面加载时触发一次滚动检查
        $(window).trigger('scroll');
    </script>
</body>
</html>